<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
  <meta charset="UTF-8"/>
  <title>A date range picker for Bootstrap</title>
  <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" media="all" href="daterangepicker.css"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="moment.js"></script>
  <script type="text/javascript" src="daterangepicker.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body style="margin: 60px 0">

<div class="container">

  <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>

  <div class="well configurator">

    <form>
      <div class="row">

        <div class="col-md-4">

          <div class="form-group">
            <label for="parentEl">parentEl</label>
            <input type="text" class="form-control" id="parentEl" value="" placeholder="body">
          </div>

          <div class="form-group">
            <label for="startDate">startDate</label>
            <input type="text" class="form-control" id="startDate" value="07/01/2015">
          </div>

          <div class="form-group">
            <label for="endDate">endDate</label>
            <input type="text" class="form-control" id="endDate" value="07/15/2015">
          </div>

          <div class="form-group">
            <label for="minDate">minDate</label>
            <input type="text" class="form-control" id="minDate" value="" placeholder="MM/DD/YYYY">
          </div>

          <div class="form-group">
            <label for="maxDate">maxDate</label>
            <input type="text" class="form-control" id="maxDate" value="" placeholder="MM/DD/YYYY">
          </div>

        </div>
        <div class="col-md-4">

          <div class="checkbox">
            <label>
              <input type="checkbox" id="autoApply"> autoApply
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="singleDatePicker"> singleDatePicker
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="showDropdowns"> showDropdowns
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="showWeekNumbers"> showWeekNumbers
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="showISOWeekNumbers"> showISOWeekNumbers
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="timePicker"> timePicker
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="timePicker24Hour"> timePicker24Hour
            </label>
          </div>

          <div class="form-group">
            <label for="timePickerIncrement">timePickerIncrement (in minutes)</label>
            <input type="text" class="form-control" id="timePickerIncrement" value="1">
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="ranges"> ranges (with example predefined ranges)
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="locale"> locale (with example settings)
            </label>
            <label id="rtl-wrap">
              <input type="checkbox" id="rtl"> RTL (right-to-left)
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="linkedCalendars" checked="checked"> linkedCalendars
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="autoUpdateInput" checked="checked"> autoUpdateInput
            </label>
          </div>

          <div class="checkbox">
            <label>
              <input type="checkbox" id="alwaysShowCalendars"> alwaysShowCalendars
            </label>
          </div>

        </div>
        <div class="col-md-4">

          <div class="form-group">
            <label for="opens">opens</label>
            <select id="opens" class="form-control">
              <option value="right" selected>right</option>
              <option value="left">left</option>
              <option value="center">center</option>
            </select>
          </div>

          <div class="form-group">
            <label for="drops">drops</label>
            <select id="drops" class="form-control">
              <option value="down" selected>down</option>
              <option value="up">up</option>
            </select>
          </div>

          <div class="form-group">
            <label for="buttonClasses">buttonClasses</label>
            <input type="text" class="form-control" id="buttonClasses" value="btn btn-sm">
          </div>

          <div class="form-group">
            <label for="applyClass">applyClass</label>
            <input type="text" class="form-control" id="applyClass" value="btn-success">
          </div>

          <div class="form-group">
            <label for="cancelClass">cancelClass</label>
            <input type="text" class="form-control" id="cancelClass" value="btn-default">
          </div>

        </div>

      </div>
    </form>

  </div>

  <div class="row">

    <div class="col-md-4 col-md-offset-2 demo">
      <h4>Your Date Range Picker</h4>
      <input type="text" id="config-demo" class="form-control">
      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
    </div>

    <div class="col-md-6">
      <h4>Configuration</h4>

      <div class="well">
        <textarea id="config-text" style="height: 300px; width: 100%; padding: 10px"></textarea>
      </div>
    </div>

  </div>

</div>

<style type="text/css">
  .demo {
    position: relative;
  }

  .demo i {
    position: absolute;
    bottom: 10px;
    right: 24px;
    top: auto;
    cursor: pointer;
  }
</style>

<script type="text/javascript">
  $(document).ready(function () {

    $('#config-text').keyup(function () {
      eval($(this).val());
    });

    $('.configurator input, .configurator select').change(function () {
      updateConfig();
    });

    $('.demo i').click(function () {
      $(this).parent().find('input').click();
    });

    $('#startDate').daterangepicker({
      singleDatePicker: true,
      startDate: moment().subtract(6, 'days')
    });

    $('#endDate').daterangepicker({
      singleDatePicker: true,
      startDate: moment()
    });

    updateConfig();

    function updateConfig() {
      var options = {};

      if ($('#singleDatePicker').is(':checked'))
        options.singleDatePicker = true;

      if ($('#showDropdowns').is(':checked'))
        options.showDropdowns = true;

      if ($('#showWeekNumbers').is(':checked'))
        options.showWeekNumbers = true;

      if ($('#showISOWeekNumbers').is(':checked'))
        options.showISOWeekNumbers = true;

      if ($('#timePicker').is(':checked'))
        options.timePicker = true;

      if ($('#timePicker24Hour').is(':checked'))
        options.timePicker24Hour = true;

      if ($('#timePickerIncrement').val().length && $('#timePickerIncrement').val() != 1)
        options.timePickerIncrement = parseInt($('#timePickerIncrement').val(), 10);

      if ($('#timePickerSeconds').is(':checked'))
        options.timePickerSeconds = true;

      if ($('#autoApply').is(':checked'))
        options.autoApply = true;

      if ($('#dateLimit').is(':checked'))
        options.dateLimit = {days: 7};

      if ($('#ranges').is(':checked')) {
        options.ranges = {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        };
      }

      if ($('#locale').is(':checked')) {
        $('#rtl-wrap').show();
        options.locale = {
          direction: $('#rtl').is(':checked') ? 'rtl' : 'ltr',
          format: 'MM/DD/YYYY HH:mm',
          separator: ' - ',
          applyLabel: 'Apply',
          cancelLabel: 'Cancel',
          fromLabel: 'From',
          toLabel: 'To',
          customRangeLabel: 'Custom',
          daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
          monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
          firstDay: 1
        };
      } else {
        $('#rtl-wrap').hide();
      }

      if (!$('#linkedCalendars').is(':checked'))
        options.linkedCalendars = false;

      if (!$('#autoUpdateInput').is(':checked'))
        options.autoUpdateInput = false;

      if ($('#alwaysShowCalendars').is(':checked'))
        options.alwaysShowCalendars = true;

      if ($('#parentEl').val().length)
        options.parentEl = $('#parentEl').val();

      if ($('#startDate').val().length)
        options.startDate = $('#startDate').val();

      if ($('#endDate').val().length)
        options.endDate = $('#endDate').val();

      if ($('#minDate').val().length)
        options.minDate = $('#minDate').val();

      if ($('#maxDate').val().length)
        options.maxDate = $('#maxDate').val();

      if ($('#opens').val().length && $('#opens').val() != 'right')
        options.opens = $('#opens').val();

      if ($('#drops').val().length && $('#drops').val() != 'down')
        options.drops = $('#drops').val();

      if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
        options.buttonClasses = $('#buttonClasses').val();

      if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
        options.applyClass = $('#applyClass').val();

      if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
        options.cancelClass = $('#cancelClass').val();

      $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, '    ') + ", function(start, end, label) {\n  console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");

      $('#config-demo').daterangepicker(options, function (start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
      });

    }

  });
</script>

</body>
</html>
